<template>
	<view>
		
	
		
		<cu-custom class="bgLiner" :isBack="true" style="position: fixed;top: 0; width: 100%;z-index: 9999;">
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		
		
		
		
		<view class="flex justify-center align-center">
			<image :src="path" mode="widthFix"></image>
			<l-painter ref="painter"></l-painter>
			<!-- :board="poster" isCanvasToTempFilePath @success="path = $event" -->
		</view>
		
	

	</view>
</template>

<script>
	import {
		getWxQrCode
	} from '@/api/wxqrcode.js';
	import {
		getDistributionConfig
	} from '@/api/distributionconfig.js';

	import base64 from '@/utils/base64.js';
	export default {
		data() {
			return {
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				theme: getApp().globalData.theme,
				userInfo: this.$store.state.user.userInfo,
				userInfoImg: this.$store.state.user.userInfo.avatarUrl,
				path: '',
				qrCodeImg: '',
				distributionConfig: {},
				pageDesign: {
					pageName: '我的推广码'
				},
			}
		},
		onLoad() {
			this.getDistributionConfig();
			this.getWxQrCode();
			// console.log(this.userInfo)
			// console.log(this.userInfoImg)
			
		},
		methods: {
			getWxQrCode() {
				getWxQrCode({
					scene: '1&' + this.userInfo.userNumber,
					page: 'pages/home/index',
					envVersion: 'release'
				}).then(res => {
					uni.showLoading({
						title: '海报生成中'
					});
					// #ifdef MP
					base64.getBase64ImagePath(res.data, '').then(res => {
						this.qrCodeImg = res;
						this.getPath();
					});
					//	#endif
					//  #ifndef MP 
					this.qrCodeImg = 'data:image/jpeg;base64,' + res.data;
					this.getPath();
					//	#endif
				});
			},

			getDistributionConfig() {
				getDistributionConfig({}).then(res => {
					this.distributionConfig = res.data
				});
			},
			save() {
				uni.saveImageToPhotosAlbum({
					filePath: this.path,
					success(res) {
						uni.showToast({
							title: '保存到相册成功',
							icon: 'none',
							duration: 3000
						});
					}
				});
			},
			getPath() {
				// 生成图片
				// 渲染
				let poster = {
					css: {
						width: "750rpx",
						paddingBottom: "40rpx",
					},
					views: [{
						css: {
							marginTop: "400rpx",
							padding: "32rpx",
							boxSizing: "border-box",
							background: "#fff",
							borderRadius: "16rpx",
							width: "544rpx",
							height:'585rpx',
							
							position:'relative',
							marginLeft:'103.13rpx'
						},
						views: [
							// {
							// src: this.distributionConfig.picUrls,
							// type: "image",
							// 	css: {
							// 		objectFit: "cover",
							// 		objectPosition: "50% 50%",
							// 		width: "606rpx",
							// 		height: "606rpx"
							// 	},
						 //    }, 
							{
							css: {
								marginTop: "-100rpx",
								textAlign: 'center',
								
								// display:'flex',
								// alignItems: 'center',
								// flexDirection: 'column'
							},
							views: [
								{
									src:this.userInfo.avatarUrl || this.defaultPic,
									type:'image',
									css:{
										width: "130rpx",
										height: "130rpx",
										borderRadius:'50%',
										border: "1px solid #e8e8e8"
									}
								},{
									text: this.userInfo.nickName,
									type: "text",
									css: {
										marginTop: "11rpx",
										boxSizing: "border-box",
										lineClamp: 2,
										color: "#000",
										lineHeight: "1.8em",
										fontSize: "28rpx",
										width: "476rpx"
									},
							    },
								{
									text: this.userInfo.city,
									type: "text",
									css: {
										boxSizing: "border-box",
										lineClamp: 2,
										color: "#B8B8B8",
										lineHeight: "1.8em",
										fontSize: "23rpx",
										width: "476rpx"
									},
								},
								{
								    src: this.qrCodeImg,
							     	type: "image",
							     	css: {
										width: "342rpx",
										height: "339rpx",
								    },

							    },
								{
									text: '扫一扫上面的二维码,进入小程序',
									type: "text",
									css: {
										boxSizing: "border-box",
										lineClamp: 2,
										color: "#B8B8B8",
										lineHeight: "1.8em",
										fontSize: "23rpx",
										width: "476rpx",
										marginTop:'10px'
									},
								}],
							type: "view"
						}],
						type: "view"
					}]
				}
				this.$refs.painter.render(poster);
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					pathType: 'url',
					quality: 1,
					success: (res) => {
						console.log(res)
						this.path = res.tempFilePath;
						uni.hideLoading();
					},
					fail: (err) => { //失败操作
						uni.hideLoading();
					},
				});
			}
		}
	}
</script>

<style scoped>
	page{
		background-color: #f8f8f8;
	}
	.bgLiner{
		background: #fff !important;
		color: #000;
		border-bottom: 1px solid #fff;
	}
</style>
